<template>
    <div style="height:100%;margin-top: 5px;">

      <!-- 动态查询列表 -->
      <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="dialogFormVisible=true">添加保修单</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表区域 -->
    <el-menu :default-active="activeIndex" class="el-menu-demo uopatedemo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">未指派</el-menu-item>
      <el-menu-item index="2">未接受</el-menu-item>
      <el-menu-item index="3">处理中</el-menu-item>
      <el-menu-item index="4">已完成</el-menu-item> 
    </el-menu>
     <!-- 列表详情 这里是路由-->
     <router-view />


         <!-- 新建请求的模态框 -->
         <el-dialog title="添加保修单" :visible.sync="dialogFormVisible">
        
         

            <el-form label-position="left" label-width="80px" :model="formLabelAlign">
              <el-form-item label="姓名">
                <el-input v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="电话号码">
                <el-input v-model="formLabelAlign.phone"></el-input>
              </el-form-item>
             <el-form-item label="维修描述">
              <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="formLabelAlign.content">
            </el-input>
             </el-form-item>    
             <el-form-item  label="地址选择">
              <el-radio-group v-model="radio1" @input="radioeven(radio1)">
                  <el-radio-button label="1" style="margin: 0px 5px;">手动填写(建议非房间号)</el-radio-button>
                  <el-radio-button label="2" style="margin: 0px 5px;">自动选择(建议是房间号)</el-radio-button>
                </el-radio-group>
        </el-form-item>        
        <el-form-item>
          <el-cascader
          v-model="value"
          :options="options2"
          @change="handleChange" v-if="radio1==2" clearable>
        </el-cascader>
           <template v-if="radio1==1">
          <el-input
          placeholder="请输入地址"
          v-model="selectdooraddress"
          clearable >
        </el-input>
      </template>

        </el-form-item>





          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </el-dialog>
        






    </div>
  </template>
  <script>
    // 1 导入需要使用的组件
     export default{
  
     
      data(){
        return{
          formInline: {
        user: '',
        region: ''
      },
      activeIndex: '0',
    
        dialogFormVisible: false,
        
        formLabelWidth: '120px',
        formLabelAlign: {
          name: '',
          content:'',
          phone:"",
       
        },
        options2:[],
        value: [],
        radio1: '2',
        selectdoorid:"",
        selectdooraddress:"",
      
        }
      },
      created(){
        var listinfo=[]
  var count=1;
 for(var i=1;i<=4;i++){
  var item={}
 
   item["value"]=i
   item["label"]=i+"号楼"
   var itemlist=[]
  for(var j=1;j<=6;j++){
      var list={}
         list["value"]=j;
         list["label"]=j+"层"  

        //  声明门号
         var valuelist=[]
    for(var t=1;t<=2;t++){
      var value={}
       value["value"]=count
       value["label"]="100"+t
       valuelist.push(value)
       count++ 
    }
    list["children"]=valuelist
    itemlist.push(list) 
  }
  item["children"]=itemlist
  listinfo.push(item)
 }
this.options2=listinfo

console.log(listinfo)
      },
      methods:{
    

        onSubmit() {
        console.log('submit!');
      },
       handleSelect(key, keyPath) {
        // console.log("切换数据")
        // console.log(key, keyPath);
        this.$router.replace(`/index/upkeep/listinfo/${key}`, (res)=>{

          console.log("成功")
        }, (res)=>{
          console.log("失败")
        })  


      },
      //添加新建请求
      addupkeep(){
        console.log("新建请求")



      },

  // 多级选择
  handleChange(value) {

this.selectdoorid=value[2]


},

//  单选框只能选择一个 当选择另一个后 当前置空
radioeven(value){
console.log("地址选择")

this.selectdooraddress=""
this.selectdoorid="",
this.value=""


this.$forceUpdate()

},

// 提交表单按钮
submit(){
console.log("这是提交表单")
this.$confirm('是否确定提交表单', '确认信息', {
 distinguishCancelAndClose: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消'
})
 .then(() => {
  var that=this;

 
  var item=that.formLabelAlign
    if(!item.name||!item.content||!item.phone){
     this.$message({
 message: '请填写完整信息',
 type: 'warning'
});
return

    }
    if(!this.selectdoorid&&!this.selectdooraddress){
     this.$message({
 message: '请填写完整信息',
 type: 'warning'
});
return
    }

    let time = new Date()
let nowTime = this.timestampToTime(time.toLocaleString('en-US',{hour12: false}).split(" "))
console.log(nowTime)

    this.axios({
    url:this.$api+'/maintainrequest/insertData', 
    dataType:"json",
   method:'post',
   params:{
     name:item.name,
     phone:item.phone,
     content:item.content,
     hId:this.selectdoorid,
     address:this.selectdooraddress,
     requesttime:nowTime
   }   
 }).then(res=>{
   console.log(res)
   this.$message({
 message: '添加成功',
 type: 'success'
});

this.dialogFormVisible=false
this.$router.replace("/index/upkeep/listinfo/1")



 }).catch(res=>{
   console.log(res)
   this.$message({
 message: '添加失败',
 type: 'warning'
});

 })
    
  



  
 }).catch((res)=>{

 })



},



    // 转化时间格式
timestampToTime(times) {
let time = times[1]
let mdy = times[0]
mdy = mdy.split('/')
let month = parseInt(mdy[0]);
let day = parseInt(mdy[1]);
let year = parseInt(mdy[2])
//打印结果为：2022-8-31 11:08:34
return year + '-' + month + '-' + day + ' ' + time
},


      }
     }
  </script>
  <style scoped>
    .uopatedemo{
      background-color: #f0f0f0;height: 30px;
      top: -20px;
      padding: 0px;
      margin: 0px;
      text-align: top;
    }

  </style>